<template>
  <div >
<!--    添加表单要求：你提交的点击按钮和表单验证的输入框需要在一个<el-form>标签中  在<el-form>标签绑定验证的属性值 :rules="loginRules" 以及点击的DOM获取 ref="form"   -->
    <el-form :inline="true" :model="tbwork.tbworklogAdd" :rules="loginRules"  ref="form" class="demo-form-inline">
    <div style="background-color: #e1f3d8;margin-left: 200px;margin-right:200px;margin-top: 20px">
      <el-row>
        <el-col :span="20">
            <el-form-item label="机构编号" style="margin-left: 35px;" prop="orgid">
              <el-input size="mini"  v-model="tbwork.tbworklogAdd.orgid"  placeholder="请输入机构编号" ></el-input>
            </el-form-item>
          <el-form-item label="电话号码" style="margin-left: 150px" prop="mobile">
            <el-input size="mini"  v-model="tbwork.tbworklogAdd.mobile"  placeholder="请输入手机号" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="工作总结" style="margin-left: 35px" prop="worksummary" >
              <el-input type="textarea" v-model="tbwork.tbworklogAdd.worksummary" size="mini"  placeholder="请输入查询内容" style="width: 400px" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
    </div>

    <div>
      <el-dialog title="添加信息" :visible.sync="dialogFormVisible2">
        <el-form
          :model="tbworklogdetailAdd"
          :rules="loginRules"
          :inline="true"
          ref="form"
          class="demo-ruleForm">
        <el-row>
          <el-form-item  label="工作类型:" >
            <el-input placeholder="请输入工作类型" v-model="tbworklogdetailAdd.worktype" prop="worktype"></el-input>
          </el-form-item>
          <el-form-item  label="工作事项:" >
            <el-input  placeholder="请输入工作事项" v-model="tbworklogdetailAdd.workdesc" prop="workdesc"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item  label="工作用时:" >
            <el-input placeholder="请输入工作用时" v-model="tbworklogdetailAdd.worktime" prop="worktime"></el-input>
          </el-form-item>
          </el-row>
            <el-row>
          <el-form-item>
            <el-button  type="primary" @click="onSub('form')" >提交</el-button>
            <el-button  type="primary" @click="EdictTableFalse()" >返回</el-button>
          </el-form-item>
              </el-row>
        </el-form>
      </el-dialog>
    </div>

    <div style="background-color:#e1f3d8;margin-left: 200px;margin-right:200px;margin-top: 20px">
      <h4 style="margin-left: 30px;margin-top: 5px">工作明细
        <el-button type="primary" size="mini" style="margin-left:600px;margin-top: 5px" @click="addTbWorklog">新增明细</el-button></h4>
      <div style="margin-left:100px;padding-bottom: 20px;margin-right:100px">
        <template>
          <el-table
            :data="tbwork.tbworkList"
            style="width: 100%">
            <el-table-column
              prop="worktype"
              label="工作类型">
            </el-table-column>
            <el-table-column
              prop="workdesc"
              label="工作事项">
            </el-table-column>
            <el-table-column
              prop="worktime"
              label="工作用时">
            </el-table-column>
          </el-table>
        </template>
        <div style="margin-top: 10px">
          <el-button size="mini" type="primary" @click="tbworkAdd()" >提交</el-button>
          <el-button size="mini" type="primary" @click="tbworkAllAdd('form')" >嵌套提交</el-button>
          <el-button size="mini" type="primary" @click="Edict()" >返回</el-button>
        </div>
      </div>
    </div>
    </el-form>
  </div>
</template>

<script>
import {tbworkAdd,tbworklogadd,tbworklogdetailadd} from '@/api/tbwork'
export default {
  name: "tbworklogAdd",
  data(){
    return{
      dialogFormVisible2:null,

      tbwork:{
        //父表新增表单
        tbworklogAdd:{
          orgid:null,
          mobile:null,
          worksummary:null
        },
        //字表新增table表格
        tbworkList:[],
      },
      //字表新增表单提交到表格
      tbworklogdetailAdd:{
        worktype:null,
        workdesc:null,
        worktime:null,
        worklogid:null,
      },
      // 表单验证规则
      loginRules: {
        //父表验证
        orgid: [{ required: true, trigger: "blur", message: "请输入机构编号" },
          { pattern: /^[0-9]/, message: '请输入正确机构编号' }],
        mobile: [{ required: true, trigger: "blur", message: "请输入手机号码" },
          { pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '手机号格式不正确' },],
        worksummary: [{ required: true, trigger: "blur", message: "请书写工作总结" }],
        //子表验证
        worktype: [{ required: true, trigger: "blur", message: "请输入工作类型" }],
        workdesc: [{ required: true, trigger: "blur", message: "请输入工作事项" }],
        worktime: [{ required: true, trigger: "blur", message: "请输入工作用时" },
          { pattern: /^[0-9|.0-9]/, message: '请输入正确工作用时' }],
      }
    }
  },
  methods:{
    //打开新增弹窗
    addTbWorklog(){
      this.dialogFormVisible2=true
    },
    //字表提交数据到table表中
    onSub(formName){
      //每次提交创建一个对象 并把此对象添加到tbworklogdetailAdd数组中
      const obj = new Object();
      var worktype=null;
      var workdesc=null;
      var worktime=null;
      obj.worktype=this.tbworklogdetailAdd.worktype
      obj.workdesc=this.tbworklogdetailAdd.workdesc
      obj.worktime=this.tbworklogdetailAdd.worktime
      this.tbwork.tbworkList.push(obj)
      this.dialogFormVisible2=false
      //字表新增明细提交之后 表单内容值清空
      this.tbworklogdetailAdd.worktype=null
      this.tbworklogdetailAdd.workdesc=null
      this.tbworklogdetailAdd.worktime=null
    },

    //提交方法一
    tbworkAdd(){
      this.$confirm("是否确定提交", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log("11111" + this.tbwork.tbworkList.workdesc)
        tbworkAdd(this.tbwork).then(response => {
        })
      })
    },

    /*提交方法二 嵌套提交*/
    tbworkAllAdd(formName){
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm("是否确定提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            tbworklogadd(this.tbwork.tbworklogAdd).then(response => {
              this.tbworklogdetailAdd.worklogid = response.data.id
              console.log(this.tbworklogdetailAdd.worklogid)
              tbworklogdetailadd(this.tbworklogdetailAdd).then(response => {
                if (response.code == 200) {
                  this.$message({
                    message: "提交成功",
                    type: "success",
                    duration: 1000
                  });
                } else {
                  this.$message({
                    message: response.msg,
                    type: "error",
                    duration: 1000
                  });
                }
              })
            })
          })
        } else {
          this.$message.error("有未填项或格式不对");
        }
      })
    },
    /*返回到起始页*/
    Edict(){
      this.$router.push("/tbwork/tbworklog")
    },
    /*关闭弹窗*/
    EdictTableFalse(){
      this.dialogFormVisible2=false
      //字表新增明细提交之后 表单内容值清空
      this.tbworklogdetailAdd.worktype=null
      this.tbworklogdetailAdd.workdesc=null
      this.tbworklogdetailAdd.worktime=null
    },


    add9(){
      this.$refs[formName].validate(valid => {
        if (valid) {
          createInterview(this.interviewForm).then(response => {
            if (response.code == 200) {
              this.$message({
                message: "提交成功",
                type: "success",
                duration: 1000
              });
            } else {
              this.$message({
                message: response.msg,
                type: "error",
                duration: 1000
              });
            }
          });
          this.$router.push("/interview/index");
        } else {
          this.$message.error("表单信息不能为空");
        }
      });
    }
  }
}
</script>

<style scoped lang="less">
//.el-row {
//  margin-bottom: 20px;
//  &:last-child {
//    margin-bottom: 0;
//  }
//}
//.el-col {
//  border-radius: 4px;
//}
//.bg-purple-dark {
//  background: #99a9bf;
//}
//.bg-purple {
//  background: #d3dce6;
//}
//.bg-purple-light {
//  background: #e5e9f2;
//}
//.grid-content {
//  border-radius: 4px;
//  min-height: 36px;
//}
//.row-bg {
//  padding: 10px 0;
//  background-color: #f9fafc;
//}
</style>
